<!--
 * @Author: 杜家璇
 * @Date: 2022-10-08 09:20:01
 * @LastEditors: 杜家璇
 * @LastEditTime: 2023-07-30 16:52:13
 * @FilePath: \weiNingWeb\src\views\index.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by 用户/公司名, All Rights Reserved. 
-->
<template>
  <div class="index">
    <!-- <div class="heads">少女虫登录系统</div> -->
    <heads title="登录系统" :types="0"></heads>
    <div class="fromBox">
      <div class="lineItem">
        <div>租户</div>
        <el-select class="select" v-model="tenantId" placeholder="请选择租户">
          <el-option
            v-for="item in tenantLists"
            :key="item.tenantId"
            :label="item.companyName"
            :value="item.tenantId">
          </el-option>
        </el-select>
      </div>
      <div class="lineItem">
        <div>账号</div>
        <input type="text" v-model="username" placeholder="请输入您的账号">
      </div>
      <div class="lineItem">
        <div>密码</div>
        <input type="text" v-model="password" placeholder="请输入您的密码">
      </div>
    </div>
    <div class="btnBox FONT" @click="clickLogin">登录</div>
  </div>
</template>

<script>
import heads from '../components/heads.vue'
import {authLogin,tenantList} from '../server/api'
import {mapMutations} from 'vuex'
export default {
  name: "index",
  components:{
    heads
  },
  data() {
    return {
      // 账号
      username:'',
      // 密码
      password:'',
      // 选中的租户
      tenantId:'',
      // 租户列表
      tenantLists:[],
    };
  },
  methods:{
    ...mapMutations([  
      'setToken', //将mutation里的方法映射到该组件内
      'setClientId'
    ]),
    // 点击登录
    clickLogin(){
      if(this.tenantId == ''){
        // 
        this.$message({
          type:'error',
          message:'请选择租户'
        })
        return false
      }
      // 判断是否输入内容
      if(this.username == ''){
        // 
        this.$message({
          type:'error',
          message:'请输入账号'
        })
        return false
      }
      if(this.password == ''){
        // 
        this.$message({
          type:'error',
          message:'请输入密码'
        })
        return false
      }
      let obj = {
        tenantId:this.tenantId,
        username:this.username,
        password:this.password,
        rememberMe:false,
        clientId:localStorage.getItem('clientId'),
        clientType:1, // 1自助机 2后台
        grantType:'password'
      }
      authLogin(obj).then(res=>{
        console.log(res);
        this.setToken(res.data.access_token)
        // this.setClientId(res.data.client_id)
        // localStorage.setItem('clientId',res.data.client_id)
        this.$router.push('/theme');
      })
    },
    keyDown(e) {
      // 回车则执行登录方法 enter键的ASCII是13
      if (e.keyCode === 13) {
        this.clickLogin()
      }
    },
    // 获取租户列表
    gettenantList(){
      tenantList().then(res=>{
        console.log(res);
        this.tenantLists = res.data.voList;
      }).catch(err=>{
        console.log(err);
      })
    },
  },
  created() {

  },
  mounted() {
    window.addEventListener('keydown', this.keyDown);
    this.gettenantList();
  },
    
    /**
    * @desc 销毁事件
    **/
  destroyed() {
    window.removeEventListener('keydown', this.keyDown, false)
  },
};
</script>

<style lang="less" scoped>
.index{
  width: 100%;
  height: 1920px;
  background-image: url('../assets/img/bgImg.png');
  background-size: 100% 1920px;
  position: relative;
  overflow: hidden;
  transform:translateX(0px) scale(1);
  .fromBox{
    width: 814px;
    height: auto;
    margin: 0 auto;
    margin-top: 290px;
    .lineItem{
      width: 100%;
      height: auto;
      display: flex;
      align-items: center;
      margin-top: 112px;
      &:first-child{
        margin-top: 0;
      }
      div{
        flex: none;
        width: 100px;
        text-align: center;
        font-size: 48px;
        color: #7875FC;
      }
      input{
        flex: 1;
        margin-left: 27px;
        outline: none;
        font-size: 40px;
        height: 85px;
        border: none;
        background-color: rgba(0,0,0,0);
        border-bottom: 1px solid #7875FC;
        box-sizing: border-box;
        color: #7875FC;
      }
      input::placeholder {
        color:#B0ADFF;
      }

      .select{
        margin-left: 27px;
        flex: 1;
        height: 100%;
        /deep/.el-input__inner{
          height: 85px;
          line-height: 85px;
          background-color: rgba(0,0,0,0);
          border: none;
          border-bottom: 1px solid #7875FC;
          border-radius: 0;
          display: flex;
          align-items: center;
          font-size: 40px;
          color: #7875FC;
          padding-left: 0px;
        }
        /deep/.el-input__inner::placeholder{
          font-size: 40px;
          color: #B0ADFF;
          top: 50%;
          position: absolute;
          transform: translateY(-50%);
        }
        /deep/.el-select__caret{
          color: #7875FC;
          font-size: 20px;
          line-height: 85px;
        }
        
      }
    }
  }

  // .btnBox{
  //   width: 308px;
  //   height: 94px;
  //   // background-image: url('../assets/img/buttonOne.png');
  //   // background-size: 100% 106px;
  //   font-size: 40px;
  //   color: #FFFFFF;
  //   text-align: center;
  //   line-height: 94px;
  //   margin: 0 auto;
  //   margin-top: 143px;
  //   background-color: #7875FC;
  //   border-radius: 64px;
  //   box-shadow: 0px 0px 10px 0px #03008A33;
  //   cursor: pointer;
  // }
  .btnBox{
      width: 250px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      margin: 0 auto;
      cursor: pointer;
      font-size: 32px;
      position: relative;
       margin-top: 143px;
      &::before{
          content:'';
          display: block;
          background-image: url('../assets/img/commonBtn.png');
          background-size: 100% 80px;
          position: absolute;
          width: 240px;
          height: 80px;
          z-index: -1;
      }
      // &::after{
      //     content: '';
      //     position: absolute;
      //     top: -15px;//设置top,left,right,bottom大小来控制扩大的范围
      //     left: -30px;
      //     right: -30px;
      //     bottom: -15px;
      // }
  }
  
}
</style>
<style>
.el-scrollbar__wrap{
    margin-bottom:0 !important;
}
</style>
